<template>
  <slot></slot>
  <slot name="beforeDetailBtn"></slot>
  <el-button
    v-if="detailShow"
    :disabled="detailBtnInfo.disabled"
    :readonly="detailBtnInfo.readonly"
    size="small"
    type="primary"
    @click="onHandleDetail"
  >
    查看
  </el-button>
  <slot name="beforeEditBtn"></slot>
  <template v-if="editShow">
    <el-button
      v-if="!isClickEdit || (isEditByRow && !isEditByRow(row))"
      v-permissions="{ permission: ['update:' + pageName] }"
      :disabled="editBtnInfo.disabled"
      :readonly="editBtnInfo.readonly"
      size="small"
      type="primary"
      @click="onHandleEdit"
    >
      编辑
    </el-button>
    <template v-else-if="!isClickEdit || (isEditByRow && isEditByRow(row))">
      <el-button size="small" type="primary" @click="onHandleSave"> 保存 </el-button>
      <el-button size="small" type="info" @click="onHandleCancel"> 取消 </el-button>
    </template>
  </template>
  <slot name="beforeDeleteBtn"></slot>
  <el-button
    v-if="delShow"
    v-permissions="{ permission: ['del:' + pageName] }"
    :disabled="delBtnInfo.disabled"
    :readonly="delBtnInfo.readonly"
    size="small"
    type="danger"
    @click="onHandleDelete"
  >
    删除
  </el-button>
  <slot name="afterDeleteBtn"></slot>
</template>

<script>
import _ from "lodash";
import mitt from "mitt";
import { useRoute } from "vue-router";
import { failMsg } from "@/utils/MessageUtils";
import { operateType } from "@/plugins/commonType.enum";

export default defineComponent({
  name: "CommonTableOperationBtns",
  props: {
    row: {
      type: Object,
      default: () => {
        return {};
      }
    },
    rowIndex: {
      type: Number,
      default: 0
    },
    emitUrl: {
      type: String,
      default: ""
    },
    emitEditId: {
      type: String,
      default: "id"
    },
    isEditByRow: {
      type: Function,
      default: () => {}
    },
    url: {
      type: String,
      default: ""
    },
    updateUrl: {
      type: String,
      default: ""
    },
    downloadUrl: {
      type: String,
      default: "org"
    },
    detailShow: {
      type: Boolean,
      default: true
    },
    previewShow: {
      type: Boolean,
      default: false
    },
    isClickEdit: {
      type: Boolean,
      default: false
    },
    editShow: {
      type: Boolean,
      default: true
    },
    delShow: { type: Boolean, default: true },
    detailBtnInfo: {
      type: Object,
      default: () => {
        return {
          disabled: false,
          readonly: false
        };
      }
    },
    editBtnInfo: {
      type: Object,
      default: () => {
        return {
          disabled: false,
          readonly: false
        };
      }
    },
    delBtnInfo: {
      type: Object,
      default: () => {
        return {
          disabled: false,
          readonly: false,
          isDel: true //默认组件内删除
        };
      }
    }
  },
  emits: {
    "handle-row-action": null,
    "del-success": null,
    "on-success": null,
    "on-fail": null,
    "on-del-row": null
  },

  setup(props, { emit }) {
    const _emitter = mitt();

    const $pubFunc = () => {
      _emitter.emit(_.head(arguments), arguments[1]);
    };

    const route = useRoute();
    //const $pub = inject("$pub");

    /**
     * 页面路由名字
     */
    const pageName = computed(() => {
      return route.name;
    });

    /**
     *  详情按钮
     */
    const onHandleDetail = async () => {
      const { row } = props;
      emit("handle-row-action", operateType.DETAIL, row);
    };

    /**
     *  编辑按钮
     */
    const onHandleEdit = async () => {
      const { row } = props;

      if (props.isClickEdit) {
        const eventName = pageName.value + props.emitEditId; //(props.emitUrl || props.url) + 'editRow'
        $pubFunc(eventName, { row, rowIndex: props.rowIndex });
        return;
      }
      emit("handle-row-action", operateType.EDIT, row);
    };

    /**
     * 保存当前行
     */

    const onHandleSave = async () => {
      const { row } = props;
      const url = props.updateUrl || `${props.url}/update`;
      const res = await postRequest(url, row);

      if (res.code == 200) {
        const eventName = pageName.value;
        $pubFunc(`${eventName}queryData`);
        emit("on-success", res);
      } else {
        failMsg(res.msg);
        emit("on-fail", res);
      }
    };

    /**
     * 还原当前行
     */

    const onHandleCancel = () => {
      const { row } = props;
      const eventName = `${pageName.value + props.emitEditId}cancel`; //(props.emitUrl || props.url) + 'editRow'
      $pubFunc(eventName, { row, rowIndex: props.rowIndex });
    };
    /**
     *  删除按钮
     */
    const onHandleDelete = async () => {
      const { row } = props;

      if (props.isClickEdit) {
        const eventName = pageName.value + props.emitEditId; //(props.emitUrl || props.url) + 'editRow'
        $pubFunc(eventName, { row, rowIndex: props.rowIndex });
        return;
      }
      emit("handle-row-action", operateType.DEL, row);
    };

    return {
      pageName,
      onHandleDetail,
      onHandleEdit,
      onHandleDelete,
      onHandleSave,
      onHandleCancel
    };
  }
});
</script>
